package com.dji.compose_learning.ui.view

import androidx.compose.animation.core.TweenSpec
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CanvasPage() {
    var showState by remember{
        mutableStateOf(false)
    }
    val animation by animateFloatAsState(targetValue = if (showState) 360f else 0f,
        animationSpec = TweenSpec(durationMillis = 3000))
    LaunchedEffect(Unit) {
//        delay(1000)
        showState = true
    }

    Canvas(modifier = Modifier.fillMaxSize(), contentDescription = "", onDraw = {
        drawArc(
            brush = Brush.horizontalGradient(colors = listOf(Color.Red, Color.Yellow)),
            startAngle = 0f,
            sweepAngle = animation,
            useCenter = false,
            size = Size(400.dp.value, 400.dp.value),
            style = Stroke(width = 5.dp.value)
        )
//        drawCircle(brush = Brush.horizontalGradient(colors = listOf(Color.Red, Color.Yellow)),
//            radius = 200.dp.value,
//            center = this.center,
//            alpha = 0.5f,
////            style = Fill
//            style = Stroke(width = 2.dp.value)
//        )
    })
}